<template>
	<ul>
		<li :style="{opacity}">欢迎学习Vue</li>

		<li>news001
			<input type="text">
		</li>
		<li>news002
			<input type="text">
		</li>
		<li>news003
			<input type="text">
		</li>
	</ul>
</template>

<script>
	export default {
		name:'News-com',
		data() {
			return {
				opacity:1
			}
		},
		beforeMount() {
			console.log('News组件即将被挂载');
		},
		mounted() {
			console.log('News组件挂载完成');
		},
		beforeDestroy() {
			console.log('News组件即将被销毁了');
		},
		activated() {
			console.log('News组件被激活了')
			this.timer = setInterval(() => {
				console.log('@')
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
			},16)
		},
		deactivated() {
			console.log('News组件失活了')
			clearInterval(this.timer)
		},
	}
</script>